<PageHeader as |p|>
  <p.levelLeft>
    <h1 class="title is-3">
      Metrics
    </h1>
  </p.levelLeft>
</PageHeader>

<div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
  <nav class="tabs">
    <ul>
      {{#link-to
        "vault.cluster.metrics.index"
        tagName="li"
        activeClass="is-active"
      }}
        {{#link-to
          "vault.cluster.metrics.index"
          data-test-configuration-tab=false
        }}
          Vault usage
        {{/link-to}}
      {{/link-to}}
      {{#link-to
        "vault.cluster.metrics.config"
        tagName="li"
        activeClass="is-active"
      }}
        {{#link-to
          "vault.cluster.metrics.config"
          data-test-configuration-tab=true
        }}
          Configuration
        {{/link-to}}
      {{/link-to}}
    </ul>
  </nav>
</div>

<Toolbar>
  <ToolbarActions>
    {{#if model.configPath.canUpdate}}
      {{#link-to 'vault.cluster.metrics.edit' class="toolbar-link"}}
        Edit configuration
      {{/link-to}}
    {{/if}}
  </ToolbarActions>
</Toolbar>

<PricingMetricsConfig @model={{model}} />
